<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>烘焙云电子蛋糕票—快速预览</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      font-family: sans-serif;
      justify-content: center;
      align-items: center;
      background: url(assets/bg.jpg) no-repeat center center/cover;
    }
    main {
      position: relative;
      width: 912px;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    form {
      display: block;
      width: 100%;
    }
    input {
      width: 100%;
      height: 40px;
      margin-top: 30px;
      margin-bottom: 20px;
      border: 0;
      outline: 0;
      padding: 0 10px 0 40px;
      border-radius: 8px;
      background: #fff url(assets/scan.png) no-repeat 10px center/22px;
      ime-mode: disabled;
    }
    figure {
      display: none;
      border: 5px solid rgb(24, 123, 232, 1);
      border-radius: 5px;
      box-shadow: 0 17px 16px 1px rgb(0, 0, 0, 0.3);
      width: 100%;
      max-height: 100%;
    }

    figure img {
      display: none;
      width: 100%;
      object-fit: contain;
      max-height: 100%;
    }

    figure iframe {
      display: none;
      width: 100%;
      height: 601px;
      background-color: #fff;
    }

    footer {
      width: 100%;
      margin-top: auto;
      margin-bottom: 10px;
      text-align: center;
      color: #888;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <main id="app">
    <form method="get" onsubmit="return handleSubmit(event)">
      <input type="text" autofocus name="name" autocomplete="off" placeholder="光标放在此处，扫描订单二维码">
    </form>
    <figure>
      <img src="" alt="">
      <iframe src="" frameborder="no" border="0" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </figure>
  </main> 
  <footer>
    <p>烘焙云电子蛋糕票专用</p>
    <p>Copyright©2022-2024 河南注意力网络技术有限公司 版权所有</p>
  </footer>
  <script>
    function handleSubmit(e) {
      e.preventDefault();
      e.stopPropagation();
      const { value } = e.target.name;
      if (!value) return false;
      e.target.name.value =  '';
      e.target.name.focus();
      if (!value.match(/https?:\/\/(?:screen|storage|static|kl)\.kelaike\.net/i)) return false;
      document.querySelector('figure').style.display = 'block';
      if (value.endsWith('.jpeg') || value.endsWith('.jpg') || value.endsWith('.png')) {
        // document.querySelector('main').style.width = '1124px';
        document.querySelector('figure img').style.display = 'block';
        document.querySelector('figure iframe').style.display = 'none';
        document.querySelector('figure img').src = value;
      } else {
        // document.querySelector('main').style.width = '911px';
        document.querySelector('figure iframe').style.display = 'block';
        document.querySelector('figure img').style.display = 'none';
        document.querySelector('figure iframe').src = value;
      }
      return false;
    }
  </script>
</body>
</html>